<script setup lang="ts">
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const formState = reactive<{
  username: string;
  password: string;
}>({
  username: '',
  password: '',
});

const router = useRouter();
const onLogin = () => {
  router.push({
    path: '/admin/home',
  });
};

</script>

<template>
  <div class="login-container">
    <div class="bg-left-bottom"></div>
    <div class="bg-right-top"></div>
    <div class="login-content">
      <div class="login-form">
        <div class="login-logo"></div>
        <div class="title">VITE-TS-VUE3-ADMIN</div>
        <a-form :model="formState" class="form-container">
          <a-form-item>
            <a-input v-model:value="formState.username" placeholder="Username" style="width: 100%;">
              <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password v-model:value="formState.password" placeholder="Password" style="width: 100%;">
              <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" block @click="onLogin">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="login-content-image"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .bg-left-bottom {
    width: 12.38vw;
    height: 10vw;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url('@/assets/bg-left-bottom.png') no-repeat center;
    background-size: cover;
  }
  .bg-right-top {
    width: 15.09vw;
    height: 10vw;
    position: absolute;
    right: 0;
    top: 0;
    background: url('@/assets/bg-right-top.png') no-repeat center;
    background-size: cover;
  }
  .login-content {
    display: flex;
    width: 900px;
    height: 550px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 2px 4px 19px 1px rgb(0 0 0 / 10%);
    position: relative;
    .login-form {
      flex: none;
      width: 350px;
      padding: 80px 20px 0;
      .login-logo {
        width: 88px;
        height: 88px;
        background: url('@/assets/logo.png') no-repeat center;
        background-size: cover;
        border-radius: 50%;
        margin: 0 auto;
      }
      .title {
        font-size: 24px;
        color: #333333;
        margin-top: 20px;
        text-align: center;
      }
      .form-container {
        width: 230px;
        margin: 20px auto 0;
      }
    }
    .login-content-image {
      flex: 1;
      height: 550px;
      background: url('@/assets/bg-login.png') no-repeat center;
      background-size: cover;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1920px) {
    .login-content {
      width: 900px;
    }
  }
  @media screen and (min-width: 1024px) and (max-width: 1280px) {
    .login-content {
      width: 700px;
    }
  }
  @media screen and (max-width: 1024px) {
    .login-content {
      width: 350px;
      background: url('@/assets/bg-login.png') no-repeat center;
      background-size: cover;
      .login-form {
        background-color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}
</style>
